<template>
	<view class="page">
		<view class="head-bg">
			<!-- <view bindtap="team" class="zizu-btn">自组团队</view> -->
			<uni-top fixed="true" statusBar="true" class="top" border="" background-color="#585cf7" color="#fff"
				left-text="团队"></uni-top>
		</view>

		<!-- 团队 -->
		<view class="announcement">
			<view class="earnings">
				<!-- 内容 -->
				<view class="earnings-content">
					<navigator hover-class="none" class="reward-box" url="/pages/team/reward-rules">
						<image src="../../../static/image/page/jiangli-bg.png" class="jiangli-bg"></image>
						<view class="reward-text flex-center">
							<text>团队奖励</text>
							<image src="../../../static/image/page/tean-arrow-icon.png" class="tean-arrow-icon"></image>
						</view>
					</navigator>
					<image :src="teamOwn.icon" class="team-ranking-head"></image>
					<view class="wjr-text">{{teamInfo.teamName}}</view>
					<view class="flex-center">
						<view class="hhr-level">{{teamOwn.currentLevelLabel}}</view>
						<image @click="onShowOrCancelName" src="../../../static/image/page/update-icon-team.png"
							class="update-icon-team">
						</image>
					</view>
					<view class="join-team-text">{{teamInfo.brief}}</view>
					<view class="flex-center">
						<view class="level-progress flex-align ">
							<text class="level-text">T{{teamOwn.currentLeveL}}</text>
							<view class="progress">
								<view :style=" {'background-color':'#585CF7',width:teamOwn.rate+'%',height:'8rpx'}">
								</view>
							</view>
							<text class="level-text">T{{teamOwn.nextLeveL}}</text>
						</view>
					</view>
					<view class="next-experience">距下一级合伙人还需要 {{teamOwn.needExperience}}万</view>
					<!-- 按钮 -->
					<navigator url="/pages/team/invite-members" class="join-btn">邀请经纪人赚奖金</navigator>
					<view class="join-btn haibap-btn" @click="getSignUpPoster">分享海报加盟报名</view>
				</view>
			</view>
		</view>

		<!-- 团队数据统计 -->
		<view class="statistics-box">
			<view class="statistics-title">团队数据统计</view>
			<view class="flex-center">
				<view class="statistics-item">
					<view class="statistics-item-text">{{teamData.teamSize}}</view>
					<view class="statistics-item-title">团队人数</view>
				</view>
				<view class="statistics-item">
					<view class="statistics-item-text">{{teamData.orderSize}}</view>
					<view class="statistics-item-title">团队进件</view>
				</view>
				<view class="statistics-item">
					<view class="statistics-item-text">{{teamData.closeMoney}}</view>
					<view class="statistics-item-title">放款额(万)</view>
				</view>
				<view class="statistics-item">
					<view class="statistics-item-text"><text class="fuhao">￥</text>{{teamData.bonus}}</view>
					<view class="statistics-item-title">我的奖金(元)</view>
				</view>
			</view>
		</view>

		<!-- 分割 -->
		<view class="line"></view>

		<!-- 推广 -->
		<view class="promote-box">
			<view class="menu flex-align">
				<view class="menu-item" :class="{'active-item':teamDataType==0}" @click="onChangeType" data-type="0">
					<text>推广的经纪人</text>
					<view v-if="teamDataType==0" class="menu-line"></view>
				</view>
				<view class="menu-item" :class="{'active-item':teamDataType==1}" @click="onChangeType" data-type="1">
					<text>额外奖金订单</text>
					<view v-if="teamDataType==1" class="menu-line"></view>
				</view>
			</view>
			<!--推广经纪人  -->
			<scroll-view :scroll-y="true" :lower-threshold="100" class="scroll-view" @scrolltolower="loadMore">
				<view>
					<view v-if="teamDataType==0" v-for="(item,index) in list" :key="index" class="promotion-broker">
						<image :src="item.appIcon" class="haed-img-promotion"></image>
						<view class="promotion-broker-right">
							<view class="flex-space">
								<text class="jjr-name">{{item.employeeName}}</text>
								<text class="jjr-phone">{{item.phoneNumber}}</text>
							</view>
							<view class="data-box flex-center">
								<view class="data-item">
									<text class="data-item-text">{{item.inQuantity}}</text>
									<text class="data-item-title">进件量</text>
								</view>
								<view class="data-item">
									<text class="data-item-text">{{item.loanAmount}}</text>
									<text class="data-item-title">放款额(万)</text>
								</view>
								<view class="data-item">
									<text class="data-item-text"><text>￥</text>{{item.bonus}}</text>
									<text class="data-item-title">已获奖金(元)</text>
								</view>
								<view class="data-item">
									<text class="data-item-text">{{item.subordinates}}</text>
									<text class="data-item-title">下级人数</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="teamDataType==1" class="order-info">
						<view class="flex-space order-box-title">
							<view class="order-menu-item-left">订单号</view>
							<view class="order-menu-item">奖金比例</view>
							<view class="order-menu-item">奖金小计</view>
							<view class="order-menu-item">奖金核算</view>
						</view>
						<view class="flex-space order-box-item" v-for="(item,index) in list" :key="index">
							<view class="order-menu-item-left">{{item.orderNumber}}</view>
							<view class="order-menu-item">{{item.partnerRatio}}%</view>
							<view class="order-menu-item">￥{{item.partnerMoney}}</view>
							<view class="order-menu-item" v-if="item.calculate==1">已核算 </view>
							<view class="order-menu-item" v-if="item.calculate==2">已发放 </view>
						</view>
					</view>
					<!-- 上拉触底无数据 -->
					<no-data v-if="isComplete || !list.length"></no-data>
				</view>
			</scroll-view>
		</view>


		<!-- 修改名字弹层 -->
		<van-overlay :show="showName" @click="onShowOrCancelName">
			<view class="gg-layer team-name-layer" @click.stop="true">
				<form @submit.stop="submitTeamName">
					<view class="lable-text">团队名：</view>
					<input class="name-input" name="name" type="text" placeholder="请输入团队名字" />
					<view class="lable-text">标语：</view>
					<input class="name-input" name="slogan" type="text" placeholder="请输入团队标签" />
					<button class="btn" formType="submit">确定</button>
				</form>
			</view>
		</van-overlay>
	</view>
</template>

<script>
	export default {
		name: "teamInfo",
		data() {
			return {
				pageNo: 1,
				isLoading: false,
				isComplete: false,
				list: [],
				teamOwn: {}, //团长信息
				teamInfo: {}, //团队信息
				teamData: {}, //团队数据统计
				teamDataType: 0, //0 推广经纪人   1 额外奖金订单
				showName: false
			}
		},
		methods: {
			init() {
				this.list = [];
				this.pageNo = 1;
				this.isComplete = false;
				this.isLoading = false;
				this.getTeamInfo();
				this.getTeamOwn();
				this.getBonus();
				this.getPromotionalAgent();
			},
			 //分享海报加盟报名
			    getSignUpPoster(){
			     this.$api.getSignUpPoster().then(res=>{
			        let url=res.data.data;
			        uni.previewImage({
			          current:url, 
			          urls: [url],
					  longPressActions: {
					  	itemList: ['保存图片'],
					  	success(data) {
					  		uni.saveImageToPhotosAlbum({
					  			filePath: url,
					  			success() {
					  				uni.showToast({
					  					icon: 'none', 
					  					title: '保存相册成功',
					  					position: 'bottom'
					  				})
					  			}
					  		});
					  	}
					  }
			        })
			       })
			    },
			//提交修改团队名字
			submitTeamName(e) {
				let data = e.detail.value;
				this.$api.updateTeamName({
					"brief": data.slogan ? data.slogan : this.teamInfo.teamName,
					"teamName": data.name ? data.name : this.teamInfo.brief
				}).then(res => {
					uni.showToast({
						title: '修改成功',
					})
					this.getTeamInfo();
					this.onShowOrCancelName();
				})

			},
			//控制修改团队名字的弹层
			onShowOrCancelName() {
				this.showName = !this.showName;
			},
			//加载更多
			loadMore() {
				if (this.teamDataType == 0) {
					!this.isComplete && !this.isLoading && this.getPromotionalAgent()
				} else {
					!this.isComplete && !this.isLoading && this.getBonusDetails()
				}

			},
			//获取额外订单奖金
			getBonusDetails() {
				this.isLoading = true;
				this.$api.getBonusDetails({
					pageNo: this.pageNo
				}).then(res => {
					let data = res.data.data.records;
					this.isLoading = false;
					this.isComplete = !data.length;
					this.list = this.list.concat(data);
					this.pageNo = ++this.pageNo;
				})
			},
			//获取推广经纪人数据
			getPromotionalAgent() {
				this.isLoading = true;
				this.$api.getPromotionalAgent({
					pageNo: this.pageNo
				}).then(res => {
					let data = res.data.data.records;
					this.isLoading = false;
					this.isComplete = !data.length;
					this.list = this.list.concat(data);
					this.pageNo = ++this.pageNo;
				})
			},

			//切换团队数据类型
			onChangeType(e) {
				this.teamDataType = e.currentTarget.dataset.type;
				this.list = [];
				this.pageNo = 1;
				this.isComplete = false;
				this.isLoading = false;
				if (this.teamDataType == 0) {
					//推广经纪人
					this.getPromotionalAgent();
				} else {
					//额外奖金
					this.getBonusDetails();
				}
			},
			//团队数据统计
			getBonus() {
				this.$api.getBonus().then(res => {
					this.teamData = res.data.data;
				})
			},
			//获取团队信息
			getTeamInfo() {
				this.$api.getTeamInfo().then(res => {
					this.teamInfo = res.data.data;
				})
			},
			//获取团长信息
			getTeamOwn() {
				this.$api.getTeamOwn().then(res => {
					this.teamOwn = res.data.data;
				})
			},
		}
	}
</script>


<style scoped>
	.page {
		background-color: #ffffff !important;
	}

	.head-bg {
		width: 100%;
		height: 210rpx;
		background-color: #585CF7;
		/* padding: 0 30rpx; */
	}

	.zizu-btn {
		text-align: right;
		font-size: 26rpx;
		color: #FFFFFF;
		padding-top: 10rpx;
	}

	/* 团队公告 */
	.announcement {
		padding: 88rpx 30rpx 30rpx;
		margin-bottom: 20rpx;

	}

	.announcement-box {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 38rpx 30rpx;
	}

	.gg-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 20rpx;
	}

	.announcement-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.edit-icon {
		width: 28rpx;
		height: 27rpx;
	}

	.gg-text {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 31rpx;
		line-height: 36rpx;
	}

	.dz-icon {
		width: 29rpx;
		height: 33rpx;
		margin-right: 20rpx;
	}

	/* 团队收益 */
	.earnings {
		margin-top: -150rpx;
		box-shadow: 0px 4rpx 20rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
	}

	.earnings-title {
		font-size: 32rpx;
		font-weight: 800;
		color: #333333;
	}



	.earnings-content {
		margin-top: 50rpx;
		width: 100%;
		background-color: #fff;
		padding: 0 30rpx 42rpx;
		border-radius: 20rpx;
		text-align: center;
		position: relative;
	}

	.reward-box {
		position: absolute;
		right: -15rpx;
		top: 75rpx;
	}

	.reward-text {
		font-size: 24rpx;
		color: #2A1D01;
		position: relative;
		top: -55rpx;
	}

	.tean-arrow-icon {
		width: 10rpx;
		height: 16rpx;
		margin-left: 10rpx;
	}

	.jiangli-bg {
		width: 156rpx;
		height: 56rpx;
	}

	.team-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.kf-tetx {
		font-size: 26rpx;
		font-weight: 500;
		color: #FC4073;
	}

	.team-name-info {
		display: flex;
		align-items: center;
		margin-top: 28rpx;
		margin-bottom: 24rpx;
	}

	.team-name-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.name-item-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.slogan {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		margin-top: 14rpx;
	}

	.earnings-info {
		width: 100%;
		background: #F8F8F8;
		border-radius: 10rpx;
	}

	.earnings-info-item {
		padding: 23rpx 20rpx;
	}

	.date-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}

	.arrow {
		width: 9rpx;
		height: 9rpx;
		margin-left: 9rpx;
	}

	.earnings-class {
		margin-top: 47rpx;
		margin-bottom: 33rpx;
	}

	.earnings-class-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.amount-fuhao {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
	}

	.amount-num {
		font-size: 46rpx;
	}

	.amount-type {
		margin-top: 16rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
	}


	/* 业绩与奖金 */
	.performance-bonus-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.head-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #585CF7;
		margin-bottom: 27rpx;
	}

	.head-item {
		border-bottom: 1rpx solid #EEEEEE;
		height: 130rpx;
	}

	.head-img-box {
		width: 80rpx;
		height: 80rpx;
		margin-right: 22rpx;
		border-radius: 50%;
	}

	.head-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 19rpx;
	}

	.results {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}

	.bonus {
		font-size: 20rpx;
		font-weight: 500;
		color: #333333;
	}

	.bonus-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	.arrow-icon {
		width: 12rpx;
		height: 20rpx;
		margin-left: 21rpx;
	}

	.tuanyuan {
		margin-top: 35rpx;
	}

	.league-member {
		border-bottom: none;
	}

	.tuanyuan-state {
		font-size: 22rpx;
		color: #FC4073;
		margin-top: 14rpx;
	}

	.tuanyuan-state-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.rules {
		height: 50rpx;
		background: rgba(252, 64, 115, .1);
		border-radius: 10rpx;
		width: 100%;
		text-align: center;
		line-height: 50rpx;
		font-size: 22rpx;
		color: #FC4073;
	}

	.additional-box {
		width: 100%;
		border-radius: 10rpx;
		border: 1px solid #CCCCCC;
		padding: 50rpx 0;
		background-color: #fff;
		margin-bottom: 30rpx;
	}

	.current-level {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.prompt {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin-bottom: 44rpx;
	}

	.btn-item {
		margin: 0 25rpx;
		width: 230rpx;
		height: 68rpx;
		background: #EEEEFE;
		border: 2rpx solid #585CF7;
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		font-size: 28rpx;
		color: #585CF7;
	}

	.additional-info {
		/* padding: 0 30rpx; */
		margin-bottom: 52rpx;
	}

	/* 邀请成员 */
	.invite-member {
		width: 100%;
		height: 80rpx;
		background: #585CF7;
		border: 1rpx solid #585CF7;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}

	/* 团队排名 */
	.team-ranking-box {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.team-ranking {
		width: 100%;
		height: 100rpx;
		background: #FAF1E0;
		border-radius: 20rpx;
		padding: 0 30rpx;
	}

	.team-ranking-head {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
		margin-top: -50rpx;
	}

	.wjr-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 30rpx;
		margin-bottom: 15rpx;
	}

	.update-icon-team {
		width: 30rpx;
		height: 34rpx;
	}

	.hhr-level {
		height: 32rpx;
		background: #FC4073;
		border-radius: 4rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		display: inline-block;
		padding: 0 10rpx;
		margin-right: 26rpx;
	}

	.level-progress {
		margin-top: 24rpx;
		margin-bottom: 16rpx;
	}

	.level-text {
		font-size: 26rpx;
		font-family: DIN;
		font-weight: bold;
		font-style: italic;
		color: #333333;
	}

	.progress {
		margin: 0 13rpx;
		width: 300rpx;
		height: 8rpx;
		background-color: #EEEEEE;
	}

	.next-experience {
		font-size: 24rpx;
		color: #999999;
	}

	.join-team-text {
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
	}

	.scan-icon {
		width: 88rpx;
		height: 88rpx;
		margin-right: 31rpx;
	}

	.wjr-tips {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 88rpx;
		align-items: flex-start;
	}

	.tips1 {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.tips2 {
		font-size: 26rpx;
		color: #999999;
	}

	.join-btn {
		margin: 58rpx auto 20rpx;
		width: 550rpx;
		height: 80rpx;
		background: #585CF7;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	.haibap-btn {
		margin-top: 0;
		background: #fff;
		color: #585CF7;
		border: 1rpx solid #585CF7;
	}

	.red-tips {
		font-size: 24rpx;
		color: #FC4073;
	}

	.team-ranking-text {
		font-size: 24rpx;
		color: #333333;
	}

	.ranking {
		font-size: 24rpx;
		color: #FF8A00;
	}

	.current-rank {
		font-size: 30rpx;
		font-weight: bold;
	}

	/* 团队统计数据 */
	.statistics-box {
		margin-top: 40rpx;
		padding: 0 30rpx 47rpx;
	}

	.statistics-title {
		font-size: 32rpx;
		color: #666666;
		margin-bottom: 48rpx;
	}

	.statistics-item {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #333333;
		font-weight: bold;
	}

	.statistics-item-text {
		font-size: 36rpx;
		/* margin-bottom: 14rpx; */
	}

	.fuhao {
		font-size: 24rpx;
	}

	.statistics-item-title {
		font-size: 26rpx;
	}

	.line {
		width: 100%;
		height: 20rpx;
		background-color: #F8F8F8;
	}

	/* 推广 */
	.promote-box {
		padding: 0 30rpx;
	}

	.menu {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.menu-item {
		height: 30rpx;
		font-size: 32rpx;
		color: #666666;
		font-weight: bold;
		/* display: flex;
	  flex-direction: column; */
		/* justify-content: center; */
		margin-right: 45rpx;
	}

	.active-item {
		color: #333333;
	}

	.menu-line {
		width: 80rpx;
		height: 4rpx;
		background: #585CF7;
		border-radius: 2rpx;
		margin: 20rpx auto 0;
	}

	.promotion-broker {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		padding-bottom: 50rpx;
	}

	.haed-img-promotion {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 22rpx;
	}

	.promotion-broker-right {
		flex: 1;
	}

	.jjr-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 20rpx;
		margin-bottom: 36rpx;
	}

	.jjr-phone {
		font-size: 24rpx;
		color: #999999;
	}

	.data-box {
		width: 100%;
		height: 150rpx;
		background: #FAFAFA;
		border-radius: 10rpx;

	}

	.data-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.data-item-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.data-item-text text {
		font-size: 22rpx;
	}

	.data-item-title {
		font-size: 24rpx;
		color: #333333;
	}

	/* 额外订单 */
	.order-info {
		padding-bottom: 50rpx;
	}

	.order-box-title {
		height: 90rpx;
		background: #FAFAFA;
		margin-top: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.order-menu-item {
		/* flex: 1; */
		min-width: 160rpx;

		text-align: center;
	}

	.order-box-item {
		height: 90rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.order-box-item:nth-child(2n+1) {
		background: #FAFAFA;
	}



	.order-menu-item-left {
		flex-grow: 1;
		text-align: center;
		word-break: break-all;
	}

	.scroll-view {
		max-height: 800rpx;
		height: auto;
	}


	/* 弹层 */

	.gg-layer {
		background-color: #fff;
		width: calc(100vw - 100rpx);
		height: 530rpx;
		border-radius: 20rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 30rpx;

	}

	.gg-textarea {
		width: 100%;
		height: 300rpx;
		background-color: #e9e9e9;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 50rpx;
	}

	.btn {
		width: 100%;
		height: 98rpx;
		background: #585CF7;
		border-radius: 49rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
	}

	.name-input {
		width: 100%;
		height: 88rpx !important;
		background-color: #e9e9e9;
		margin-bottom: 50rpx;
		padding: 20rpx !important;
		box-sizing: border-box;
	}

	.lable-text {
		margin-bottom: 10rpx;
		font-size: 26rpx;
	}

	/* .team-name-layer {
	  height: 300rpx;
	} */
	.dz-icon {
		width: 30rpx;
		height: 32rpx;
	}

	.address-text {
		height: 150rpx;
		margin-right: 20rpx;
	}

	.gg-layer-add {
		height: 395rpx;
	}
</style>
